@charset "UTF-8";
*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;
}
#fullPage-nav {
  _display: none;
  font-size: 12px;
  li {
    width: 90px;//控制导航的宽度
    margin: 20px 0 0;
    vertical-align: middle;
    a {//导航的小圆点
      float: right;
      width: 21px;
      height: 21px;
      text-decoration: none;
      text-align: right;
    }
    span{
      width: 80%;
      height: 80%;
    }
  }
}
.fullPage-tooltip {
  //设置导航字体的样式
  float: left;
  top: 0px;
  margin-right: 5px;
  font-size: 16px;
  font-family: 微软雅黑;
  color: black;
  line-height: 21px;
}
body{
  font-family: 微软雅黑;
  background: linear-gradient(to right,#C9FFBF,#FFAFBD);
}
.info-title{
  font-family: cursive;
  font-size: 60px;
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: all 1s;
}
.page-header{
  border: none;
}
.section1{
  position: relative;
  color: #ffffff;
  background: linear-gradient(to right,#283048,#859398);
  .info-title{
    color: #E9C46A;
  }
  .photo{
    margin: 3% 0;
    position: relative;
    top: -60%;
    transform: scale(0.5, 0.5);
    left: 40%;
    width: 20%;
    border-radius: 50%;
    overflow: hidden;
    transition: all 1s;
    img{
      width: 100%;
      display: block;
    }
  }
  .info1{
    position: relative;
    padding-left: 25%;
    p:nth-child(1){
      position: relative;
      left: -2000px;
      transition: all 1s;
    }
    p:nth-child(2){
      position: relative;
      left: -2000px;
      transition: all 1s;
    }
    p:nth-child(3){
      position: relative;
      left: -2000px;
      transition: all 1s;
    }
    p:nth-child(4){
      position: relative;
      left: -2000px;
      transition: all 1s;
    }
    p:nth-child(5){
      position: relative;
      left: -2000px;
      transition: all 1s;
    }
    p:nth-child(6){
      position: relative;
      left: -2000px;
      transition: all 1s;
    }
  }
  .info2{
    position: relative;
    padding-left: 25%;
    p:nth-child(1){
      position: relative;
      right: -2000px;
      transition: all 1s;
    }
    p:nth-child(2){
      position: relative;
      right: -2000px;
      transition: all 1s;
    }
    p:nth-child(3){
      position: relative;
      right: -2000px;
      transition: all 1s;
    }
    p:nth-child(4){
      position: relative;
      right: -2000px;
      transition: all 1s;
    }
    p:nth-child(5){
      position: relative;
      right: -2000px;
      transition: all 1s;
    }
    p:nth-child(6){
      position: relative;
      right: -2000px;
      transition: all 1s;
    }
  }
  span{
    margin-right: 2%;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-width: 8px 0 8px 16px;
    border-style: solid;
    border-color: transparent transparent transparent #F3FFBD;
  }
}
.section2{
  position: relative;
  background: linear-gradient(to right,#3D7EAA,#FFE47A);
  .info-title{
    color: #55606F;
  }
  .skill{
    position: relative;
    margin-top: 3%;
    padding: 10%;
    font-size: 16px;
    color: #ffffff;
    p{
      position: relative;
      display: block;
      padding: 2%;
      margin-bottom: 3%;
      border-radius: 10px;
      background: orange;
      opacity: 0;
      transition: all 1s;
    }
    p:nth-child(1){
      left: -100%;
    }
    p:nth-child(2){
      left: 100%;
    }
    p:nth-child(3){
      left: -100%;
    }
    p:nth-child(4){
      left: 100%;
    }
    p:nth-child(5){
      left: -100%;
    }
    p:nth-child(6){
      left: 100%;
    }
  }
}
.section3{
  position: relative;
  background: linear-gradient(to right,#1D2B64,#F8CDDA);
  .info-title{
    color: #9CB093;
  }
  .education{
    position: relative;
    padding-top: 10%;
    p{
      transition: all 3s;
      opacity: 0;
    }
    .h1{
      position: relative;
      font-size: 60px;
      font-weight: bold;
      color: #EEF3F0;
      text-shadow: 2px 3px 2px #000;
    }
    .h2{
      font-weight: 500;
      color: #ffffff;
    }
    .h3{
      margin: 3% 0;
      color: #AEE2D9;
    }
    .h4{
      font-size: 28px;
      font-weight: bold;
      text-shadow: 1px 1px 2px #fff;
      color: #99FF33;
      margin-top: 10%;
    }
  }
}
.section4 {
  position: relative;
  background: linear-gradient(to right,#403B4A,#E7E9BB);
  .career{
    position: relative;
    overflow: hidden;
    .page-header{
      font-family: cursive;
      border-bottom:2px solid #000009;
    }
    .neirong{
      padding: 5%;
      line-height: 30px;
    }
  }
  .career1{
    transition: all 2s ease;
    transform: translateX(-100%) rotateX(720deg) rotateZ(720deg);
  }
  .career2{
    transition: all 2s ease;
    transform: translateX(100%) rotateX(720deg) rotateZ(-720deg);
  }
}
.section5{
  position: relative;
  background: linear-gradient(to right,#5614B0,#DBD65C);
  .self{
    padding: 20px;
  }
  p{
    width: 60%;
    font-weight: 500;
    color: #ffffff;
    position: relative;
    display: block;
    padding: 3%;
    margin-bottom: 4%;
    border-radius: 10px;
    background: #001E2A;
    transition: all 1s ease;
    &:hover{
      background: white;
      color: #001E2A;
      font-weight: bold;
    }
  }
  @keyframes slide1 {
    0% {

    }
    30%{
      transform: translate(30px,0px);
    }
    50%{
      transform: translate(30px,20px);
    }
    80%{
      transform: translate(0px,20px);
    }
    100%{
      transform: translate(0px,0px);
    }
  }
  @keyframes slide2 {
    0% {

    }
    25%{
      transform: translate(-30px,0px);
    }
    50%{
      transform: translate(-30px,20px);
    }
    75%{
      transform: translate(0px,20px);
    }
    100%{
      transform: translate(0px,0px);
    }
  }
  p:nth-child(odd){
    margin-left: 40%;
    animation: slide1 4s linear infinite;
  }
  p:nth-child(even){
    animation: slide2 4s linear infinite;
  }
}
.section6{
  position: relative;
  background: linear-gradient(to right,#C9FFBF,#FFAFBD);
  .info-title{
    color: #9CB093;
  }
  .pro{
    margin-top: 5%;
    a{
      position: relative;
      display: block;
      width: 100%;
      margin-bottom: 4%;
      overflow: hidden;
      transition: all 1s ease-in-out;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
      span{
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        opacity: 0;
        transition: all 1s ease;
        font-weight: 500;
        font-size: 24px;
        padding: 20% 0;
        color: #E9C46A;
      }
      &:hover span{
        opacity: 1;
        transform: rotate(720deg);
      }
      &:hover{
        transform:scale(1.4);
        z-index: 1;
      }
    }
  }
}
.active {
    .info-title {
      opacity: 1;
      transform: scale(1.2, 1.2);
      transition-delay: 0.5s;
    }
    .photo {
      top: 0;
      transform: scale(1, 1);
      transition-delay: 0.5s;
    }
    .info1 {
      p:nth-child(1) {
        left: 0;
        transition-delay: 0.5s;
      }
      p:nth-child(2) {
        left: 0;
        transition-delay: 0.55s;
      }
      p:nth-child(3) {
        left: 0;
        transition-delay: 0.60s;
      }
      p:nth-child(4) {
        left: 0;
        transition-delay: 0.65s;
      }
      p:nth-child(5) {
        left: 0;
        transition-delay: 0.70s;
      }
      p:nth-child(6) {
        left: 0;
        transition-delay: 0.75s;
      }
    }
    .info2 {
      p:nth-child(6) {
        right: 0;
        transition-delay: 0.5s;
      }
      p:nth-child(5) {
        right: 0;
        transition-delay: 0.55s;
      }
      p:nth-child(4) {
        right: 0;
        transition-delay: 0.60s;
      }
      p:nth-child(3) {
        right: 0;
        transition-delay: 0.65s;
      }
      p:nth-child(2) {
        right: 0;
        transition-delay: 0.70s;
      }
      p:nth-child(1) {
        right: 0;
        transition-delay: 0.75s;
      }
    }
    .skill {
      p:nth-child(1) {
        left: 0;
        opacity: 1;
        transition-delay: .4s;
      }
      p:nth-child(2) {
        left: 0;
        opacity: 1;
        transition-delay: .6s;
      }
      p:nth-child(3) {
        left: 0;
        opacity: 1;
        transition-delay: .8s;
      }
      p:nth-child(4) {
        left: 0;
        opacity: 1;
        transition-delay: 1s;
      }
      p:nth-child(5) {
        left: 0;
        opacity: 1;
        transition-delay: 1.2s;
      }
      p:nth-child(6) {
        left: 0;
        opacity: 1;
        transition-delay: 1.4s;
      }
    }
    .education {
      .h1 {
        opacity: 1;
        transition-delay: .7s;
      }
      .h2 {
        opacity: 1;
        transition-delay: 1.4s;
      }
      .h3 {
        opacity: 1;
        transition-delay: 2.1s;
      }
      .h4 {
        opacity: 1;
        transition-delay: 2.8s;
      }
    }
    .career1{
      transform: translateX(0) rotateX(0) rotateZ(0);
      transition-delay: .5s;
    }
    .career2{
      transform: translateX(0) rotateX(0) rotateZ(0);
      transition-delay: .5s;
    }
  }

